<template>
    <div class="seamless-scroll-page" style="width: 100%">
        <div class="item-content header-content">
            <div
                class="item00"
                v-for="(item, index) in headerList"
                :key="index"
                :style="{
                    flex: props.flexList[index] || 1,
                    justifyContent: props.alignList[index] || 'center',
                }"
            >
                <n-ellipsis style="max-width: 100%">{{ item }}</n-ellipsis>
            </div>
        </div>
        <div style="overflow: hidden" :style="{ maxHeight: props.height }">
            <Vue3SeamlessScroll
                :list="props.list"
                :step="props.step"
                hover
                isWatch
                :limitScrollNum="props.limitScrollNum"
                :singleHeight="props.singleHeight"
                class="container"
            >
                <div
                    v-for="(item, index) in props.list"
                    :key="index"
                    class="item-content item-content00"
                >
                    <div
                        v-for="(_item, _index) in props.itemKeys"
                        :key="_index"
                        class="item00"
                        :style="{
                            flex: props.flexList[_index] || 1,
                            justifyContent: props.alignList[_index] || 'center',
                        }"
                    >
                        <n-ellipsis style="max-width: 100%">{{
                            item[_item]
                        }}</n-ellipsis>
                    </div>
                </div>
            </Vue3SeamlessScroll>
        </div>
    </div>
</template>
<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const props = defineProps({
    //容器高度
    height: {
        type: String,
        default: "100px",
    },
    //列表数据
    list: {
        type: Array,
        default: () => [],
    },
    //最小滚动数量
    limitScrollNum: {
        type: Number,
        default: () => 5,
    },
    //列表key
    itemKeys: {
        type: Array,
        default: () => [],
    },
    //列宽度
    flexList: {
        type: Array,
        default: () => [],
    },
    //头部标题列表
    headerList: {
        type: Array,
        default: () => [],
    },
    //列对齐方式
    alignList: {
        type: Array,
        default: () => [],
    },
    //速度
    step: {
        type: Number,
        default: () => 0.5,
    },
    //每次滚动高度
    singleHeight: {
        type: Number,
        default: () => 0,
    },
});
</script>
<style lang="less" scoped>
.seamless-scroll-page {
    .item-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 10;
        .item00 {
            overflow: hidden;
            max-width: 100%;
            padding: 0 16px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        &.header-content {
            font-size: 15px;
            margin-bottom: 4px;
        }
        &.item-content00 {
            cursor: pointer;
            margin-bottom: 4px;
            transition: all 0.2s ease-in-out;
            background: fade(#fff, 10%);
            border-radius: 2px;
        }
    }
}
</style>
